<script lang="ts" setup>
import type { TabOption } from '@vben/types';

import { onMounted, ref } from 'vue';

import { AnalysisChartsTabs, AnalysisOverview } from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';
import { useUserStore } from '@vben/stores';

import { notification } from 'ant-design-vue';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisits from './analytics-visits.vue';

// import AnalyticsVisitsData from './analytics-visits-data.vue';
// import AnalyticsVisitsSales from './analytics-visits-sales.vue';
// import AnalyticsVisitsSource from './analytics-visits-source.vue';

import { getMerchantData, getShopLastDaysData } from '#/api';

const chartTabs: TabOption[] = [
  {
    label: '本月销售',
    value: 'trends',
  },
  {
    label: '本月采购',
    value: 'visits',
  },
];

const userStore = useUserStore();
const goodsStatusData = ref([]);

const saleList = ref([]);
const purchaseList = ref([]);

const overviewItems: any = ref([]);

onMounted(() => {
  getMerchantDataApi();
  getShopLastDaysDataApi();
  const userId = userStore.userInfo?.userId;
  // console.log('userId', userId);
  initSocket(userId);
});

function getMerchantDataApi() {
  getMerchantData().then((res) => {
    const profit = res.profit;
    const subUserCount = res.subUserCount;
    goodsStatusData.value = res.goodsStatusList;

    const dataList = [];
    const data1 = {
      icon: SvgCardIcon,
      title: '销售数据',
      value: profit.saleAmount,
      totalTitle: '单量',
      totalValue: profit.saleCount,
    };
    const data2 = {
      icon: SvgCakeIcon,
      title: '采购数据',
      value: profit.purchaseAmount,
      totalTitle: '单量',
      totalValue: profit.purchaseCount,
    };

    const data3 = {
      icon: SvgDownloadIcon,
      title: '纯利润',
      value: profit.profitAmount,
      totalTitle: '其他费用',
      totalValue: profit.otherAmount,
    };
    const data4 = {
      icon: SvgBellIcon,
      title: '子账号',
      value: subUserCount,
      totalTitle: '',
      totalValue: '',
    };

    dataList.push(data1, data2, data3, data4);

    // console.log(dataList);

    overviewItems.value = dataList;

    // const chartTabsList = [
    //   {
    //     label: '本月销售',
    //     value: 'trends',
    //   },
    //   {
    //     label: '本月采购',
    //     value: 'visits',
    //   },
    // ];

    // chartTabs.value = chartTabsList;
  });
}

function getShopLastDaysDataApi() {
  getShopLastDaysData().then((res) => {
    // 销售与采购 最近7天 折线图
    saleList.value = res.sale;
    purchaseList.value = res.purchase;
  });
}

function initSocket(userId: any) {
  if (userId === null || userId === '') {
    return;
  }

  const wsUrl = `wss://dly1688.lntelliai.com/websocket/${userId}`; // process.env.VITE_APP_WSSERVE;

  const ws = new WebSocket(wsUrl);

  ws.addEventListener('open', () => {
    // console.log('WebSocket 连接已建立！');
    // if (ws.readyState === WebSocket.OPEN) {
    // } else {
    //   // console.error('Websocket未连接');
    // }
  });

  // eslint-disable-next-line unicorn/prefer-add-event-listener
  ws.onmessage = (event) => {
    const data = event.data;
    // console.log('WebSocket data',data);
    if (
      data === null ||
      data === '' ||
      data === undefined ||
      data === '连接成功'
    ) {
      return;
    }
    notification.success({ message: '消息通知', description: data });
  };
}
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />

    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends :data="saleList" />
      </template>
      <template #visits>
        <AnalyticsVisits :data="purchaseList" />
      </template>
    </AnalysisChartsTabs>

    <!-- <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
        <AnalyticsVisitsData />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
        <AnalyticsVisitsSource />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
        <AnalyticsVisitsSales />
      </AnalysisChartCard>
    </div> -->
  </div>
</template>
